<template>
  <div>
    <!-- <div class="tool-bar">
      <el-button type="primary" @click="addUser">添加用户</el-button>
    </div> -->

    <el-table :data="tableData">
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="password" label="密码" />
      <el-table-column prop="nickname" label="昵称" />
      <el-table-column prop="avatar" label="头像" width="80px">
        <template #default="scope">
          <el-avatar :src="scope.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="80px" />
      <el-table-column prop="sex'" label="性别" width="80px">
        <template #default="scope">
          {{ scope.row.sex == 0 ? "女" : "男" }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="status" label="状态" width="80px">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="val => changeUserStatus(scope.row.uid, val as number)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column prop="uid" label="操作" width="200" align="center">
        <template #default="scope">
          <el-button @click="editUser(scope.row)">编辑</el-button>
          <el-popconfirm
            title="您确定要删除吗？"
            @confirm="deleteUser(scope.row.uid)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page.pageNum"
      background
      layout="prev, pager, next"
      :total="page.total"
      class="footer-bar"
      @change="PageChange"
    />

    <el-dialog
      v-model="DialogVisiable"
      width="500px"
      destroy-on-close
      :closed="dialogClose"
    >
      <el-form :model="form" label-width="auto" style="padding: 20px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickname" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  getUserPage,
  deleteUserById,
  updateUserById,
  updateUserStatusById
} from "../../api/userList";
import { ElMessage } from "element-plus";
import { idText } from "typescript";

const tableData: any = ref([]);
const page = ref({ pageNum: 1, pageSize: 10, total: 0 });
const DialogVisiable = ref(false);
let form = reactive({
  username: "",
  password: "",
  nickname: "",
  age: "",
  sex: 1,
  phone: "",
  email: "",
  address: "",
  status: 1
});

onMounted(() => {
  getData();
});

const getData = async () => {
  getUserPage(page.value).then((data: any) => {
    if (data.code === 200) {
      tableData.value = data.data.records;
      page.value.total = data.data.total;
    }
  });
};

const deleteUser = id => {
  const arr = [id];
  deleteUserById(arr).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: data.code === 200 ? "success" : "warning"
    });
  });
};

const editUser = row => {
  form = row;
  showDialog();
};

const updateUser = () => {
  updateUserById(form).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: data.code === 200 ? "success" : "warning"
    });
  });
};

const changeUserStatus = (uid: number, status: number) => {
  updateUserStatusById(uid, status).then((data: any) => {
    ElMessage({
      message: data.msg,
      type: data.code === 200 ? "success" : "warning"
    });
    getData();
  });
};

const addUser = () => {
  showDialog();
};

const resetForm = () => {
  form = {
    username: "",
    password: "",
    nickname: "",
    age: "",
    sex: 1,
    phone: "",
    email: "",
    address: "",
    status: 1
  };
};
const showDialog = () => {
  DialogVisiable.value = true;
};

const handleCancel = () => {
  DialogVisiable.value = false;
};

const dialogClose = () => {
  console.log("closed");
};

const handleOk = () => {
  updateUser();
};

const PageChange = (currentPage, pageSize) => {
  page.value = {
    ...page.value,
    pageNum: currentPage,
    pageSize: pageSize
  };
  getData();
};
</script>
<style scoped>
.main-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.tool-bar {
  display: flex;
  justify-content: end;
  margin: 10px;
}

.footer-bar {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
</style>
